<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>23423</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.2/lib/index.css">
		<!-- <link href="css/mui.css" rel="stylesheet" /> -->
		<style type="text/css">
			body,html{
				height: 100%;
				width: 100%;
			}
			.showCell {
				display: flex;
				justify-content: space-around;
			}

			.showCell span {
				color: white;
				padding: 5px;
				background: red;
				font-size: 16px;
				border-radius: 50%;
			}

			.showCell .blue {
				background: #0062CC;
			}

			.showCellTitle {
				display: flex;
				justify-content: space-between;
			}
			#app{
				height: 100%;
			}
		</style>
	</head>

	<body>
		<div id="app">
			 <van-nav-bar
			  title="lishi"
			  left-text="返回"
			  left-arrow
			  bind:click-left="onClickLeft">
			  <form action="" method="post" id="formId" slot="title">
			  	 <van-field v-model="issueNum"  placeholder="请输入期号" type="search" />
			  </form>
			  
</van-nav-bar>
			<van-list v-model="loading" :finished="finished" finished-text="" @load="onLoad">
				<van-cell v-for="item in list" :key="item.issueNum" is-link>
					<div slot="title" class="showCellTitle">
						<div>{{item.issueNum}}期</div>
						<div>{{item.dateTime | showdateFilter}}</div>
					</div>
					<div slot="label" class="showCell">
						<span v-text="item.red01"></span>
						<span v-text="item.red02"></span>
						<span v-text="item.red03"></span>
						<span v-text="item.red04"></span>
						<span v-text="item.red05"></span>
						<span v-text="item.red06"></span>
						<span v-text="item.bule" class="blue"></span>
					</div>

				</van-cell>

			</van-list>
			
		</div>
		<script src="../js/mui.js"></script>
		<script src="../js/commen.js"></script>
		<!-- 引入样式文件 -->
		

		<!-- 引入 Vue 和 Vant 的 JS 文件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@2.2/lib/vant.min.js"></script>
		<script type="text/javascript">
			mui.init()
			
			var app = new Vue({
				el: '#app',
				data() {
					return {
						issueNum:'',
						list: [],
						loading: false,
						finished: true,
						pagenum: 0,

					};
				},
				filters: {
					showdateFilter: function(value) {
						
						return value.substring(0,10)
					}
				},
				methods: {
					onLoad:function() {
						// app.loading = true;
						// 异步更新数据
						mui.ajax(http + _data.history_queryHistoryDetail, {
							data: {
								issueNum:app.issueNum
							},
							dataType: 'json', //服务器返回json格式数据
							type: 'post', //HTTP请求类型
							timeout: 10000, //超时时间设置为10秒；
							success: function(data) {
							
								app.loading = false;
								if (data.code == "0") {
									app.list = data.data;
									
								} else {
									alert(data.msg)
								}
							},
							error: function(xhr, type, errorThrown) {
								alert(JSON.stringify(xhr))
							}
						});
					},
					onClickLeft:function(){
						mui.back();
					}
				},
				mounted:function(){
					document.getElementById("formId").addEventListener('submit',function(){
						app.onLoad()
					})
				}
				
			});
			
		</script>
	</body>

</html>
